<template>
  <component :is="icon as Component" v-if="isComponent" v-bind="$attrs" />
  <img v-else-if="isImage || isImageLink" class="img-icon" :src="icon as string" v-bind="$attrs" />
  <SvgIcon v-else :icon="icon as string" v-bind="$attrs" />
</template>

<script setup lang="ts">
import SvgIcon from './SvgIcon.vue'

// 定义 Props 接口
interface Props {
  /** 图标，可以是字符串或对象 */
  icon: object | string
  /** 是否为图片 */
  isImage?: boolean
}

// 定义选项
defineOptions({
  name: 'BeIcon',
  inheritAttrs: false
})

// props
const props = withDefaults(defineProps<Props>(), {
  isImage: false
})

const isImageLink = computed(() => {
  return typeof props.icon === 'string' && /^https?:\/\/.*$/.test(props.icon)
})

const isComponent = computed(() => {
  return typeof props.icon === 'string' && props.icon !== null && typeof props.icon === 'object' && typeof props.icon === 'function'
})
</script>
